<template>
    <a-modal :title="$t('创建保护任务')" v-model='isShow' :maskClosable='false' v-dragModal :width="550">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"
            labelAlign="right">
            <a-spin :spinning="loading" style="width: 520px;">
                <a-form-model-item :label="$t('保护任务名称') + ':'" prop="name">
                    <a-input v-model="form.name" :placeholder="$t('Enter') + $t('保护任务名称')" />
                </a-form-model-item>
                <a-form-model-item :label="$t('保护类型') + ':'" prop="type">
                    <a-radio-group v-model="form.type" @change="handleType">
                        <a-radio v-for="item of typeOptions" :value="item.value" :key="item.value">{{ item.label
                            }}</a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item :label="$t('选择快照复制平台') + ':'" prop="platform">
                    <a-select v-model="form.platform" :placeholder="$t('Enter') + $t('快照复制平台')"
                        @change="handlePlatform">
                        <a-select-option v-for="item of platformOptions" :value="item.value" :key="item.value">
                            {{ item.label }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item :label="$t('备份存储池') + ':'" prop="pool">
                    <a-select v-model="form.pool" :placeholder="$t('Choose') + $t('备份存储池')">
                        <a-select-option v-for="item of poolOptions" :value="item.value" :key="item.value">
                            {{ item.label }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item :label="$t('选择块设备') + ':'" prop="block">
                    <a-select v-model="form.block" :placeholder="$t('Choose') + $t('块设备')">
                        <a-select-option v-for="item of blockOptions" :value="item.value" :key="item.value">
                            {{ item.label }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item :label="$t('选择快照复制策略') + ':'" prop="strategy">
                    <a-select v-model="form.strategy" :placeholder="$t('Choose') + $t('复制策略')" :disabled="isDisabled">
                        <a-select-option v-for="item of strategyOptions" :value="item.value" :key="item.value">
                            {{ item.label }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
            </a-spin>
        </a-form-model>

        <template slot="footer">
            <a-button type='primary' @click="handleCreate">{{ $t('保存') }}</a-button>
            <a-button @click="handleClose">{{ $t('Cancel') }}</a-button>
        </template>

    </a-modal>
</template>

<script>
export default {
    data() {
        const strategyValidate = (rule, value, callback) => {
            if (this.form.type == 2 && this.form.strategy == undefined) {
                callback(new Error(this.$t('Choose') + this.$t('复制策略')))
            } else if (this.form.type == 1) {
                this.form.strategy = undefined
                callback()
            } else {
                callback()
            }
        }
        return {
            isShow: false,
            isDisabled: false,
            labelCol: { span: 6 },
            wrapperCol: { span: 17 },
            form: {
                name: '',
                type: undefined,
                platform: undefined,
                pool: undefined,
                block: undefined,
                strategy: undefined,
            },
            rules: {
                name: [
                    { required: true, message: this.$t('Enter') + this.$t('名称'), trigger: 'blur' },
                    { pattern: /^[A-Za-z0-9_]{1,128}$/, message: this.$t('名称仅支持大小写英文字母 + 数字 + 英文下划线，1-128 个字符'), trigger: 'blur' }
                ],
                type: [
                    { required: true, message: this.$t('Choose') + this.$t('保护类型'), trigger: 'change' },
                ],
                platform: [
                    { required: true, message: this.$t('Choose') + this.$t('快照复制平台'), trigger: 'change' },
                ],
                pool: [
                    { required: true, message: this.$t('Choose') + this.$t('备份存储池'), trigger: 'change' },
                ],
                block: [
                    { required: true, message: this.$t('Choose') + this.$t('块设备'), trigger: 'change' },
                ],
                strategy: [
                    { required: true, message: this.$t('Choose') + this.$t('复制策略'), trigger: 'change', validator: strategyValidate },
                ],
            },
            typeOptions: [
                { label: '快照', value: 2 },
                { label: '日志', value: 1 }
            ],
            platformOptions: [],
            poolOptions: [],
            blockOptions: [],
            strategyOptions: [],
            getPoolOptions: [],
            loading: false,
            directory: '',
            id: '',
            level: '',
        };
    },
    methods: {
        async handlePlatform(value) {
            this.form.pool = undefined
            // this.poolOptions = this.getPoolOptions.filter(item => item.id == value).map(item => ({ label: item.remote_cluster_pool, value: item.remote_cluster_pool }))
            // console.log(this.poolOptions)
            this.form.pool = this.getPoolOptions.filter(item => item.id == value).map(item => ({ label: item.remote_cluster_pool, value: item.remote_cluster_pool }))[0].label
            const { data } = await this.$api.data.getImageListApi({ copy_platform_id: value })
            this.blockOptions = data.imeges.map(item => ({ label: item.image_name, value: item.image_name }))
        },
        async handleType() {
            if (this.form.type == 1) this.isDisabled = true
            else if (this.form.type == 2) this.isDisabled = false
        },
        handleCreate() {
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    const params = {
                        name: this.form.name,
                        protect_type: this.form.type,
                        copy_platform_id: this.form.platform,
                        strategy_id: this.form.strategy,
                        target_type: 1,
                        strategy_type: 3,
                        target: this.form.block
                    }
                    this.loading = true
                    const { data } = await this.$api.data.appendTaskCopyApi(params)
                    this.model(data.id) //返回模板
                    this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') {
                        this.$emit('get-list')
                        this.handleClose()
                    }
                    this.loading = false
                } else {
                    return false;
                }
            });
        },
        handleClose() {
            this.$refs['ruleForm'].resetFields();
            this.isShow = false
        },
    }
}
</script>